<template>
	<div class="event-log">
		<el-card>
			<div class="toolbar">
				<el-input v-model="filters.keyword" placeholder="搜索事件/描述/操作员" clearable style="width:220px" />
				<el-date-picker v-model="filters.date" type="daterange" range-separator="至" start-placeholder="起始日期"
					end-placeholder="结束日期" value-format="YYYY-MM-DD" style="width:260px" />
				<el-button type="danger" plain @click="clearAll" :disabled="logs.length === 0">清空日志</el-button>
			</div>
			<el-table :data="filteredLogs" border size="small" style="margin-bottom:8px;">
				<el-table-column prop="time" label="时间" width="155" />
				<el-table-column prop="event" label="事件类型" width="110" />
				<el-table-column prop="desc" label="描述" />
				<el-table-column prop="operator" label="操作员" width="100" />
				<el-table-column prop="related" label="关联对象" width="140" />
				<el-table-column label="操作" width="80">
					<template #default="scope">
						<el-button size="small" type="danger" @click="removeLog(scope.$index)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div v-if="logs.length === 0" style="text-align:center;color:#bbb;padding:18px 0;">暂无日志记录</div>
		</el-card>
	</div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'

// 日志类型、操作员等
const eventTypes = ['参数调整', '人工干预', '告警恢复', '设备保养', '产线切换', '订单处理', '异常上报', '系统登录', '数据导出']
const descMap = {
	'参数调整': '修改工艺参数：温度设定',
	'人工干预': '现场人员调整设备运行状态',
	'告警恢复': '异常处理完毕，系统自动恢复',
	'设备保养': '完成例行设备保养',
	'产线切换': '切换至新订单生产',
	'订单处理': '订单审核/下达',
	'异常上报': '自动检测到异常并记录',
	'系统登录': '管理员登录系统',
	'数据导出': '导出统计分析报表'
}
const operators = ['张三', '李四', '王五', '赵六', '管理员']
const relateds = ['压片机D', '制粒机C', '固体制剂线', '生产计划单', '系统后台', '包装工序']

// 日志列表
const logs = ref([])

function addLog() {
	const t = eventTypes[Math.floor(Math.random() * eventTypes.length)]
	const d = descMap[t] || t
	const op = operators[Math.floor(Math.random() * operators.length)]
	const r = relateds[Math.floor(Math.random() * relateds.length)]
	const dt = new Date()
	const time = dt.toLocaleString()
	logs.value.unshift({
		time,
		event: t,
		desc: d + (Math.random() > 0.8 ? '（详见系统）' : ''),
		operator: op,
		related: r
	})
}

// 自动生成日志
let timer = null
onMounted(() => {
	// 页面初始填充若干条日志
	for (let i = 0; i < 16; i++) addLog()
	timer = setInterval(() => {
		if (Math.random() > 0.55) addLog()
		// 限制日志最大条数
		if (logs.value.length > 40) logs.value.pop()
	}, 2200)
})
onUnmounted(() => { if (timer) clearInterval(timer) })

// 筛选
const filters = ref({ keyword: '', date: [] })
const filteredLogs = computed(() => {
	return logs.value.filter(l =>
		(!filters.value.keyword ||
			l.event.includes(filters.value.keyword) ||
			l.desc.includes(filters.value.keyword) ||
			l.operator.includes(filters.value.keyword)
		) &&
		(
			!filters.value.date.length ||
			(l.time.slice(0, 10) >= filters.value.date[0] && l.time.slice(0, 10) <= filters.value.date[1])
		)
	)
})

// 删除
function removeLog(idx) { logs.value.splice(idx, 1) }
function clearAll() { logs.value = [] }
</script>

<style scoped>
.event-log {
	padding: 16px;
}

.toolbar {
	display: flex;
	gap: 14px;
	align-items: center;
	margin-bottom: 10px;
	flex-wrap: wrap;
}
</style>
  
